import moment from 'moment'
import { getAllAnalysisComponentByEditType, updateAllAnalysisComponent } from '../lib/analysisData'
import {
  defaultBackgroundAttr,
  defaultBorderAttr,
  defaultBorderRadiusAttr,
  defaultFontAttr,
  fliterComponentTypes,
  defaultFarmat,
  defaultAnimations,
  defaultBoxShadowAttr,
} from '../lib/const'
import { deepCopy, ergodicList } from '../lib/utils'
window.moment = moment
// 公共样式
export const commonStyle = {
  opacity: 1,
  widthUnit: 'px',
  heightUnit: 'px',
  leftUnit: 'px',
  topUnit: 'px',
  width: 100,
  height: 100,
}

export const commonAttr = {
  animations: {
    ...defaultAnimations,
  },
  events: {},
  jump: {
    targetType: 'board',
    openType: 'target',
    isFilter: false,
    source: undefined,
    target: [],
    isEnable: false,
  },
  linkage: {
    source: undefined, // 源字段(关联字段)
    componentList: [], // 目标组件字段列表
    isEnable: false,
  },
  class: 'c-component',
  isShow: true, // 是否显示
  isDrop: false, // 当前准备接受被放入组件的组件
  isGeometry: true, // 是否拥有几何属性配置
  isData: true, // 是否拥有数据配置
  isStyle: true, // 是否拥有样式配置
  isEvent: false, // 是否拥有事件配置
  isLinkage: false, // 是否拥有联动配置
  isJump: false, // 是否拥有跳转配置
  isAnimations: true, // 是否拥有动画配置
}

// 编辑器左侧组件列表
// 组件需要在custom-components注册,并在render函数里添加新增的组件
const list = () => {
  return [
    {
      id: 'text',
      tag: 'c-text',
      label: '文字',
      props: {
        value: '这是一段文字',
      },
      icon: 'italic',
      type: 'other',
      style: {
        width: 100,
        height: 22,
        ...defaultFontAttr,
        ...defaultBackgroundAttr,
      },
    },
    {
      id: 'web',
      tag: 'c-web',
      label: 'Web',
      props: {
        value: 'https://',
      },
      icon: 'global',
      type: 'other',
      style: {
        width: 500,
        height: 400,
        ...defaultBackgroundAttr,
        ...defaultBorderAttr,
        ...defaultBorderRadiusAttr,
      },
    },
    {
      id: 'box',
      tag: 'c-box',
      label: '方块',
      props: {
        value: '',
      },
      icon: 'border',
      type: 'other',
      style: {
        width: 100,
        height: 100,
        ...defaultBorderAttr,
        ...defaultBorderRadiusAttr,
        ...defaultBackgroundAttr,
        boxShadow: { ...defaultBoxShadowAttr },
      },
      isData: false,
    },
    {
      id: 'tabs',
      tag: 'c-tabs',
      label: '选项卡',
      props: {
        value: '新标签0',
        list: [
          {
            label: '新标签0',
            value: '新标签0',
            children: [],
          },
        ],
      },
      icon: 'copy',
      type: 'other',
      style: {
        width: 300,
        height: 200,
        ...defaultBackgroundAttr,
      },
    },
    {
      id: 'input',
      tag: 'c-input',
      label: '文本框',
      props: {
        value: undefined,
        title: '名称',
        filterField: undefined,
      },
      type: fliterComponentTypes.input,
      icon: 'form',
      style: {
        width: 240,
        height: 34,
      },
    },
    // TODO:
    // 后台暂时没有相关功能, 下拉树功能停止
    // {
    //   id: "tree-select",
    //   tag: "c-tree-select",
    //   label: "下拉树",
    //   props: {
    //     filterField: [],
    //     value: "",
    //     title: "下拉选择",
    //     options: [],
    //     mode: "default"
    //   },
    //   isSetAttr: true,
    //   dataTabel: "select",
    //   type: fliterComponentTypes.treeSelect,
    //   icon: "apartment",
    //   style: {
    //     width: 200,
    //     height: 34,
    //   },

    // },
    {
      id: 'date-picker',
      tag: 'c-date-picker',
      label: '日期选择',
      props: {
        value: undefined,
        ...defaultFarmat,
        title: '日期选择',
        minDate: undefined,
        maxDate: undefined,
        filterField: undefined,
      },
      type: fliterComponentTypes.date,
      icon: 'dashboard',
      style: {
        width: 240,
        height: 34,
      },
    },
    {
      id: 'range-picker',
      tag: 'c-range-picker',
      label: '日期范围',
      props: {
        value: [],
        ...defaultFarmat,
        title: '日期范围',
        filterField: undefined,
      },
      type: fliterComponentTypes.dateArray,
      icon: 'dashboard',
      style: {
        width: 400,
        height: 34,
      },
    },
    {
      id: 'button',
      tag: 'c-button',
      label: '查询按钮',
      text: '查询',
      props: {
        title: '查询',
      },
      type: fliterComponentTypes.button,
      icon: 'search',
      style: {
        width: 100,
        height: 34,
        type: 'primary',
      },
      // events: ()=> {
      //   return {
      //     click: (vm,opt,event)=> {
      //       opt.handleSubmit(vm,opt, event)
      //     }
      //   }
      // }
      events: {
        click: 'handleSubmit',
      },
    },
    {
      id: 'button',
      tag: 'c-button',
      label: '重置按钮',
      text: '重置',
      props: {
        title: '重置',
      },
      type: fliterComponentTypes.button,
      icon: 'reload',
      style: {
        width: 100,
        height: 34,
        type: 'default',
      },
      events: {
        click: 'handleReset',
      },
      // events: ()=> {
      //   return {
      //     click: (vm,opt,event)=> {
      //       opt.handleReset(vm,opt, event)
      //     }
      //   }
      // }
    },
    {
      id: 'select',
      tag: 'c-select',
      label: '下拉列表',
      props: {
        filterField: [],
        value: '',
        title: '下拉选择',
        options: [],
        mode: 'default',
      },
      isSetAttr: true,
      dataTabel: 'select',
      type: fliterComponentTypes.select,
      icon: 'unordered-list',
      style: {
        width: 200,
        height: 34,
      },
    },
    // {
    //   id: "c-slider",
    //   tag: "c-slider",
    //   label: "范围滑块",
    //   props: {
    //     value: null,
    //     title: "范围滑块",
    //     filterField: undefined
    //   },
    //   type: "filter",
    //   icon: "slider",
    //   style: {
    //     width: 200,
    //     height: 34,
    //     backgroundColor: "#ffffff",
    //   },

    // },
    {
      id: 'custom',
      tag: 'c-custom',
      label: '自定义',
      props: {
        value: "<div style='border: 1px solid'>自定义<div>",
      },
      icon: 'code',
      type: 'other',
      isGeometry: true, // 是否拥有几何属性配置
      isData: true, // 是否拥有数据配置
      isStyle: false, // 是否拥有样式配置
      isEvent: false, // 是否拥有事件配置
      isLinkage: false, // 是否拥有联动配置
      isJump: false, // 是否拥有跳转配置
      style: {
        width: 100,
        height: 100,
      },
    },
  ]
}

export default function getList(types) {
  return list()
    .filter((item) => types.includes(item.type))
    .map((item) => ({
      ...commonAttr,
      ...item,
      style: {
        ...commonStyle,
        ...item.style,
      },
    }))
}
